<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
    <style>
        .multiplebgs article p {
            /* 为支持多背景浏览器编写的样式 */
        }

        .no-multiplebgs article p {
            /* 为不支持多背景的浏览器编写的后备样式 */
        }

        article,
        aside,
        footer,
        header,
        hgroup,
        nav,
        section {
            display: block;
        }
    </style>
    <script src="scripts/modernizr.js"></script>
</head>
<body>
<canvas id="draw-in-me" width="120" height="40">
    <p>Powered By HTML5 canvas</p>
</canvas>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100"
        codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
    <param name="move" value="true">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="quality" value="high">
    <embed src="moviename.swf" width="100" height="100" play="true" loop="true" qualith="high"
           pluginspage="http://get.adobe.com/flashplayer">
</object>
<video src="move.mp4">
    <!--不支持原生视频时的替代内容-->
    <a href="move.mp4">Download move.mp4</a>
</video>
<audio src="sound.ogg">
    <!--不支持音频时的替代内容-->
    <a href="sound.ogg">Download sound.ogg</a>
</audio>
<video src="" controls></video>
<label for="email"><input id="email" name="email" type="email"></label>
<label for="first-name"><input id="first-name" name="first-name" type="text" placeholder="Your First Name"></label>
<script>
    function html5Intro() {
        if (!Modernizr.inputtypes.date) {
            /* 不支持本地数据, 使用自定义的数据选择脚本 */
            createDetepicker(document.getElementById('birthday'));
        }

        // IE
        document.createElement('article');

        function createDetepicker(elem) {

        }
    }

    function somethingSamples() {
        function canvas() {
            function draw() {
                var canvas = document.getElementById('draw-in-me');
                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    ctx.beginPath();
                    ctx.moveTo(120.0, 32.0);
                    ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0);
                    ctx.lineTo(8.0, 40.0);
                    ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32.0);
                    ctx.lineTo(0.0, 8.0);
                    ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0);
                    ctx.lineTo(112.0, 0.0);
                    ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0);
                    ctx.lineTo(120.0, 32.0);
                    ctx.closePath();
                    ctx.fill();
                    ctx.lineWidth = 2.0;
                    ctx.strokeStyle = 'rgb(255, 255, 255)';
                    ctx.stroke();
                }
            }

            window.onload();

            function convertToGS(img) {
                // 如果浏览器不支持 <canvas> 就返回
                if (!Modernizr.canvas) {
                    return;
                }

                // 存储原始的彩色版
                img.color = img.src;

                // 创建灰度版
                img.grayscale = createGSCanvas(img);

                // 在 mouseover/out 事件发生时切换图片
                img.onmouseover = function () {
                    this.src = this.color;
                };

                img.onmouseout = function () {
                    this.src = this.grayscale;
                };

                img.onmouseout();
            }

            function createGSCanvas(img) {
                var canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;

                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);

                // 注意: getImageData 只能操作与脚本位于同一个域中的图片
                var c = ctx.getImageData(0, 0, img.width, img.height);
                for (var i = 0; i < c.height; i++) {
                    for (var j = 0; j < c.width; j++) {
                        var x = (i * 4) * c.height + (j * 4);
                        var r = c.data[x];
                        var g = c.data[x + 1];
                        var b = c.data[x + 2];
                        c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3;
                    }
                }

                ctx.putImageData(c, 0, 0, 0, 0, c.width, c.height);

                return canvas.toDataURL();
            }

            window.onload = function () {
                convertToGS(document.getElementById('avatar'));
            };
        }

        function audioAndVideo() {
            function createVideoControls() {
                var videos = document.getElementsByTagName('video');
                for (var i = 0; i < videos.length; i++) {
                    addControls(videos[i]);
                }
            }

            function addControls(video) {
                video.removeAttribute('controls');

                video.height = video.videoHeight;
                video.width = video.videoWidth;
                video.parentNode.style.height = video.videoHeight + 'px';
                video.parentNode.style.width = video.videoWidth + 'px';

                var controls = document.createElement('div');
                controls.setAttribute('class', 'controls');

                var play = document.createElement('button');
                play.setAttribute('title', 'Plya');
                play.innerHTML = '&#x25BA;';

                controls.appendChild(play);

                video.parentNode.insertBefore(controls, video);

                play.onclick = function () {
                    if (video.ended) {
                        video.currentTime = 0;
                    }
                    if (video.paused) {
                        video.play();
                    } else {
                        video.pause();
                    }
                };

                video.addEventListener('play', function () {
                    play.innerHTML = '&#x2590;&#x2590;';
                    play.setAttribute('paused', true);
                }, false);

                video.addEventListener('pause', function () {
                    play.removeAttribute('paused');
                    play.innerHTML = '&#x25BA;';
                }, false);
            }

            window.onload = function () {
                createVideoControls();
            };
        }
    }

    function form() {
        if (!Modernizr.inputtypes.date) {
            // 生成日期选择器的脚本
        }

        if (!Modernizr.input.placeholder) {
            // 生成占位符提示信息的脚本
        }

        function inputSupportsType(type) {
            if (!document.createElement) {
                return false;
            }
            var input = document.createElement('input');
            input.setAttribute('type', type);
            return input.type == 'text' && type != 'text';
        }

        if (!inputSupportsType('date')) {
            // 生成日期选择器的脚本
        }

        function elementSupportsAttribute(elementName, attribute) {
            if (!document.createElement) {
                return false;
            }
            var temp = document.createElement(elementName);
            return (attribute in temp);
        }

        if (!elementSupportsAttribute('input', 'placeholder')) {
            // 生成占位符提示信息的脚本
        }

        if (!Modernizr.input.placeholder) {
            var input = document.getElementById('first-name');
            input.onfocus = function () {
                var text = this.placeholder || this.getAttribute('placeholder');
                if (this.value == text) {
                    // 重置输入框的值，以隐藏临时的占位符文本
                    this.value = '';
                }
            };
            input.onblur = function () {
                if (this.value == '') {
                    // 把输入框的值设置为占位符文本
                }
            };
            input.onblur();
        }
    }
</script>
</body>
</html>